<template>
    <div id = "articleList">
      <div id="cardList">
        <ul v-infinite-scroll="nextPage" infinite-scroll-immediate="false" infinite-scroll-disabled="scrollDisabled">
          <li v-for="item in articleList" :key="item.id">
            <el-card>
              <el-link v-html="item.title" class="articleTitle" :href="'/article/detail?id=' + item.id" target="_blank" :underline="false"></el-link>
              <div v-html="item.profile ? item.profile : '本章将讲解' + item.title" class="articleProfile"></div>
              <div class="articleInfo">
                <div class="articleType">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="typeItem in item.typeList" :key="typeItem.typeId">
                      <el-link v-html="typeItem.typeName" class="typeName" :href="'/article/list?typeId=' + typeItem.typeId" :underline="false"></el-link>
                    </el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
                <div class="articleAuthor">{{ item.userName }}</div>
                <div class="articleDate">{{ `${fmtDate(item.createTime)}` }}</div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import { getArticleListApi } from '@/api/article-list/article-list'
import { fmtDateToDay } from '@/util/DateUtil'

export default {
  name: 'article-list',
  data () {
    return {
      params: {
        typeList: this.$route.query.typeId,
        articleTitle: this.$route.query.title,
        containChildType: true
      },
      img: {
        avatar: require('@/img/zp.png'),
        zfb: require('@/img/zfb.png'),
        wx: require('@/img/wx.png')
      },
      pageInfo: {},
      articleList: [],
      scrollDisabled: false
    }
  },
  mounted () {
    this.getArticleList(this.params)
    this.loadFontFamily()
  },
  methods: {
    async getArticleList (data) {
      this.scrollDisabled = true
      this.$message({
        message: '正在加载新文章',
        type: 'warning',
        duration: '1500',
        showClose: true
      })
      const res = await getArticleListApi(data)
      const _this = this
      if (!res.data) {
        setTimeout(function () {
          _this.scrollDisabled = false
        }, '1')
      } else {
        if (res.data.currentPage < res.data.totalPage) {
          setTimeout(function () {
            _this.scrollDisabled = false
          }, '2000')
        }
        const list = res.data.list
        if (list) {
          this.articleList = [...this.articleList, ...list]
          console.log(this.articleList)
        } else {
          this.$message.error('获取文章类型失败，请尝试刷新界面')
        }
      }
    },
    fmtDate (date) {
      return fmtDateToDay(date)
    },
    nextPage () {
      console.log('nextPage')
      this.params.pageNo = this.params.pageNo ? this.params.pageNo + 1 : 2
      this.getArticleList(this.params)
    },
    loadFontFamily () {
      if (!this.checkFont('LYZT')) {
        this.$message.info('首次进入界面时，可能会因加载字体导致变慢，加载完毕后自行恢复')
      }
    },
    checkFont (name) {
      let values = document.fonts.values()
      let isHave = false
      let item = values.next()
      while (!item.done && !isHave) {
        let fontFace = item.value
        console.log(fontFace.family)
        if (fontFace.family === name) {
          isHave = true
        }
        item = values.next()
      }
      return isHave
    }
  }
}
</script>

<style lang="scss">
#articleList {
  height: 100%;
  width: 100%;

  #cardList {

    li {
      margin-bottom: 15px;
    }

    .articleTitle {
      background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-family: SXSGY,sans-serif;
      font-size: 28px;
      font-display: swap;
    }
    .articleProfile {
      padding-top: 10px;
      text-indent: 18px;
      font-size: 18px;
      color: white;
      font-family: XXXY,cursive;
      font-display: swap;
    }
    .articleInfo {
      padding-top: 10px;
      font-size: 14px;
      padding-left: 10px;
      font-family: serif;
      color: #c0fd03;
      div {
        display: inline-block;
      }
      .articleType {
        width: 40%;
      }
      .articleAuthor {
        width: 30%;
      }
      .typeName {
        color: #c0fd03;
        font-weight: unset;
        cursor: pointer;
      }
    }
    .el-card__header {
      padding: 10px 20px;
    }
    ul {
      list-style: none;
    }
    #pageInfo {
      margin-top: 10px;
      padding: 0;
      float: right;
      color: white;
      button {
        background: black;
      }
      input {
        background: #3b3b3b80 !important;
        color: white;
      }
      .number {
        background: black;
      }
      .el-pagination__jump {
        color: white;
      }
    }
  }
}

.el-card {
  background: #3b3b3b80 !important;
  color: white;
}
</style>
